<template>
  <view class="content">
    <!-- 添加导航栏 -->
    <nav-bar title="订单管理"></nav-bar>
    <!-- 搜索区域 -->
    <view class="search-bar">
      <view class="search-container">
        <uni-search-bar v-model="searchKey" placeholder="输入订单号/客户姓名" radius="100" clearButton="auto"
          @confirm="handleSearch" />
        <view class="action-buttons">
          <view class="search-btn" @click="handleSearch">搜索</view>
        </view>
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list" v-if="orders.length">
      <!-- 修改分页组件 -->
      <uni-pagination :current="pageNum" :pageSize="pageSize" :total="total" @change="handlePageChange" />

      <view class="order-item" v-for="order in orders" :key="order.order_id" @click="viewOrderDetail(order.order_id)">
        <view class="order-info">
          <text class="order-id">客户: {{ order.phone }}</text>
          <view class="order-meta">
            <uni-tag :text="paymentMethodMap[order.payment_method]" type="primary" size="small" />
            <text class="status-text" :class="order.status">
              {{ orderStatusMap[order.status] }}
            </text>
          </view>
          <text class="card-package" v-if="order.card_package">
            卡包: {{ order.card_package.name }} ({{ cardTypeMap[order.card_package.card_type] ||
              order.card_package.card_type }})
          </text>
          <text class="order-amount strike">原价: ¥{{ order.total_amount }}</text>
          <text class="actual-amount">实付: ¥{{ order.actual_amount }}</text>
          <text class="order-time">时间: {{ formatTime(order.created_at) }}</text>
        </view>
        <view class="detail-link">

        </view>
      </view>
    </view>

    <view v-else class="empty-tip">
      <text>暂无订单信息</text>
    </view>

  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue';
import TabBar from '@/components/tab-bar/tab-bar.vue';
import order from '@/utils/order.js';

export default {
  components: {
    NavBar,  // 添加导航栏组件
    TabBar
  },
  data() {
    return {
      searchKey: '',
      orders: [],
      storeId: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderStatusMap: {
        pending: '完成',
        paid: '已支付',
        completed: '已完成',
        cancelled: '已取消'
      },
      paymentMethodMap: {
        cash: '现金',
        card: '刷卡',
        wechat: '微信',
        alipay: '支付宝'
      },
      cardTypeMap: {
        'default': '默认卡',
        'comprehensive': '综合卡',
        'per_use': '次卡'
      }
    };
  },
  onLoad(options) {
    if (options.store_id) {
      this.storeId = options.store_id;
    }
    this.fetchOrders();
  },
  methods: {
    async fetchOrders() {
      try {
        const params = {
          store_id: this.storeId,
          page_num: this.pageNum,
          page_size: this.pageSize
        };

        if (this.searchKey) {
          params.search_key = this.searchKey;
        }

        const res = await order.getList(params);
        this.orders = res.list || [];
        this.total = res.total || 0;
      } catch (error) {
        uni.showToast({
          title: '数据加载失败',
          icon: 'none'
        });
      }
    },
    formatTime(timestamp) {
      return new Date(timestamp).toLocaleString();
    },
    handleSearch() {
      this.pageNum = 1;
      this.fetchOrders();
    },
    viewOrderDetail(orderId) {
      uni.navigateTo({
        url: `/pages/order/detail?id=${orderId}`
      });
    },
    prevPage() {
      if (this.pageNum > 1) {
        this.pageNum--;
        this.fetchOrders();
      }
    },
    nextPage() {
      if (this.pageNum * this.pageSize < this.total) {
        this.pageNum++;
        this.fetchOrders();
      }
    },
    handlePageChange(e) {
      this.pageNum = e.current;
      this.fetchOrders();
    }
  }
}
</script>

<style lang="scss">
@import '@/uni.scss';
.content {
  padding-bottom: 100rpx;
}

.order-list {
  margin-top: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.order-id {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.order-meta {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.order-amount {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}

.actual-amount {
  font-size: 26rpx;
  color: #FF3B30;
  font-weight: bold;
  margin-top: 10rpx;
}

.order-time {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.status-text {
  margin-left: 10rpx;
  font-size: 24rpx;
}

.status-text.pending {
  color: #FF9500;
}

.status-text.paid {
  color: #09BB07;
}

.status-text.completed {
  color: #007AFF;
}

.status-text.cancelled {
  color: #FF3B30;
}

.detail-link {
  display: flex;
  align-items: center;
  color: #999;
}

.empty-tip {
  text-align: center;
  padding: 40rpx;
  color: #999;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30rpx;
  padding: 20rpx;
}

.page-btn {
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  margin: 0 20rpx;
}

.page-btn:disabled {
  background: #ccc;
}

.page-info {
  font-size: 28rpx;
  color: #666;
}

.card-package {
  font-size: 26rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>